<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/css初始化.css">
    <link rel="stylesheet" href="css/common.css">
    <script src="jQuery 文件/jQuery_min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .shopping {
            /* background-color: #ccc; */
            height: 1000px;
        }
        .shang_pin .head_s_p ul {
            height: 50px;
            padding-left: 30px;
            background-color: pink;
        }
        .shang_pin .head_s_p li {
            float: left;
            margin-right: 125px;
            line-height: 50px;
        }
        .shang_pin .head_s_p li:nth-child(2) {
            margin-right: 380px;
        }

        .shang_pin .body_s_p li {
            position: relative;
            height: 250px;
            /* background-color: blue; */
            border-top: 2px solid black;
            margin-bottom: 20px;
            font-size: 30px;
            padding-left: 20px;
        }
        .price {
            position: absolute;
            top: 0;
            left: 550px;
        }
        .shang_pin .body_s_p li div {
            position: absolute;
            top: 0;
            left: 730px;
        }
        .shang_pin .body_s_p li div span {
            border: 1px solid red;
            border-radius: 50%;
        }
        .xiao_ji {
            position: absolute;
            top: 0;
            left: 850px; 
        }
        .shang_pin .body_s_p li>span:last-child {
            position: absolute;
            top: 0;
            left: 1033px; 
        }
        .shang_pin .foot_s_p {
            position: relative;
            height: 50px;
            font-size: 30px;
            border: 1px solid black;
            box-shadow: 2px 2px 2px rgba(0, 0,0, .3);
        }
        .foot_s_p div:nth-of-type(1) {
            position: absolute;
            top: 0;
            left: 700px;
        }
        .foot_s_p div:nth-of-type(2) {
            position: absolute;
            top: 0;
            left: 950px;
        }
    </style>
</head>
<body>
    <div class="w shopping">
        <div class="shang_pin">
            <div class="head_s_p">
                <ul>
                    <li>
                        全选
                        <input type="checkbox" class="checkboxall">
                    </li>
                    <li>商品</li>
                    <li>单价</li>
                    <li>数量</li>
                    <li>小计</li>
                    <li>操作</li>
                </ul>
            </div>
            <div class="body_s_p">
                <ul>
                    <li>
                        <input type="checkbox" class="checkbox_d">
                        <span>123</span>
                        <span class="price">￥22.60</span>
                        <div>
                            <span class="jian_hao">-</span>
                            <span class="conent">1</span>
                            <span class="jia_hao">+</span>
                        </div>
                        <span class="xiao_ji">￥22.60</span>
                        <span><a href="#">删除</a></span>
                    </li>
                    <li>
                        <input type="checkbox" class="checkbox_d">
                        <span>456</span>
                        <span class="price">￥88.99</span>
                        <div>
                            <span class="jian_hao">-</span>
                            <span class="conent">1</span>
                            <span class="jia_hao">+</span>
                        </div>
                        <span class="xiao_ji">￥88.99</span>
                        <span><a href="#">删除</a></span>

                    </li>
                    <li>
                        <input type="checkbox" class="checkbox_d">
                        <span>789</span>
                        <span class="price">￥120.00</span>
                        <div>
                            <span class="jian_hao">-</span>
                            <span class="conent">1</span>
                            <span class="jia_hao">+</span>
                        </div>
                        <span class="xiao_ji">￥120.00</span>
                        <span><a href="#">删除</a></span>


                    </li>
                </ul>
            </div>
            <div class="foot_s_p">
                全选
                <input type="checkbox" class="checkboxall">
                <div>已经选<span style="color:red" class="conent_sum">0</span>件商品</div>
                <div>总价<spana style="color:red" class="zong_jia">￥0.00</spana>元</div>
            </div>

            <!-- 底部公共部分开始 common -->
            <footer class="footer">
                    <div class="w">
                        <!-- 底部服务模块 -->
                        <div class="mod_servecie">
                            <ul>
                                <li>
                                    <div class="servecie_img">
                                    </div>
                                    <div class="servecie_text">
                                        <h1>正品保障</h1>
                                        <p>正品保障，提供发票</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="servecie_img">
                                    </div>
                                    <div class="servecie_text">
                                        <h1>正品保障</h1>
                                        <p>正品保障，提供发票</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="servecie_img">
                                    </div>
                                    <div class="servecie_text">
                                        <h1>正品保障</h1>
                                        <p>正品保障，提供发票</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="servecie_img">
                                    </div>
                                    <div class="servecie_text">
                                        <h1>正品保障</h1>
                                        <p>正品保障，提供发票</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="servecie_img">
                                    </div>
                                    <div class="servecie_text">
                                        <h1>正品保障</h1>
                                        <p>正品保障，提供发票</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                
                        <!-- 底部帮助模块 -->
                        <div class="mod_help">
                            <dl>
                                <dt>购物指南</dt>
                                <dd><a href="#">购物流程</a></dd>
                                <dd><a href="#">会员介绍</a></dd>
                                <dd><a href="#">生活旅行/团购</a></dd>
                                <dd><a href="#">常见问题</a></dd>
                                <dd><a href="#">大家电</a></dd>
                                <dd><a href="#">联系客服</a></dd>
                            </dl>
                            <dl>
                                <dt>购物指南</dt>
                                <dd><a href="#">购物流程</a></dd>
                                <dd><a href="#">会员介绍</a></dd>
                                <dd><a href="#">生活旅行/团购</a></dd>
                                <dd><a href="#">常见问题</a></dd>
                                <dd><a href="#">大家电</a></dd>
                                <dd><a href="#">联系客服</a></dd>
                            </dl>
                            <dl>
                                <dt>购物指南</dt>
                                <dd><a href="#">购物流程</a></dd>
                                <dd><a href="#">会员介绍</a></dd>
                                <dd><a href="#">生活旅行/团购</a></dd>
                                <dd><a href="#">常见问题</a></dd>
                                <dd><a href="#">大家电</a></dd>
                                <dd><a href="#">联系客服</a></dd>
                            </dl>
                            <dl>
                                <dt>购物指南</dt>
                                <dd><a href="#">购物流程</a></dd>
                                <dd><a href="#">会员介绍</a></dd>
                                <dd><a href="#">生活旅行/团购</a></dd>
                                <dd><a href="#">常见问题</a></dd>
                                <dd><a href="#">大家电</a></dd>
                                <dd><a href="#">联系客服</a></dd>
                            </dl>
                            <dl>
                                <dt>购物指南</dt>
                                <dd><a href="#">购物流程</a></dd>
                                <dd><a href="#">会员介绍</a></dd>
                                <dd><a href="#">生活旅行/团购</a></dd>
                                <dd><a href="#">常见问题</a></dd>
                                <dd><a href="#">大家电</a></dd>
                                <dd><a href="#">联系客服</a></dd>
                            </dl>
                            <dl>
                                <dt>帮助中心</dt>
                                <dd>
                                    <img src="images/wx_cz.jpg" alt="无法加载">
                                    品优购客户端
                                </dd>
                            </dl>
                        </div>
                
                        <!--底部版权模块 -->
                        <div class="mod_copyright">
                            <div class="xiangguan_url">
                                <a href="#">关于我们</a>|
                                <a href="#">关于我们</a>|
                                <a href="#">关于我们</a>|
                                <a href="#">关于我们</a>|
                                <a href="#">关于我们</a>|
                                <a href="#">关于我们</a>|
                                <a href="#">关于我们</a>|
                                <a href="#">关于我们</a>|
                                <a href="#">关于我们</a>|
                                <a href="#">关于我们</a>|
                                <a href="#">关于我们</a>
                            </div>
                            <div>
                                <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</p>
                            </div>
                            <div>
                                <p>京ICP备08001421号京公网安备110108007702</p>
                            </div>
                        </div>
                    </div>
            </footer>
            <!-- 底部公共部分结束 common -->
        </div>
    </div>
    <script>
        $(function() {
            $(".checkboxall").change(function() {
            // 获取全选按钮的状态
            var checkboxall_state = $(this).prop("checked");
            
            // 将全选按钮 和 单个按钮 的状态都设置成全选的状态 跟着全选走
            $(".checkboxall").prop("checked", checkboxall_state);
            $(".checkbox_d").prop("checked", checkboxall_state);
            })

            // 如果商品都选上了则全选按钮选中 否则 不
            $(".checkbox_d").change(function() {
                if($(".checkbox_d:checked").length === $(".checkbox_d").length) {
                    $(".checkboxall").prop("checked", true);
                }else {
                    $(".checkboxall").prop("checked", false);
                }
            })
            // 加号功能
            $(".jia_hao").click(function() {
                var n = $(this).siblings('.conent').text();
                n++;  
                $(this).siblings('.conent').text(n);
                // 小计
                var dan_jia = $(this).parent().siblings('.price').text().substr(1);
                var xiao_ji =  n* dan_jia; 
                $(this).parent().siblings('.xiao_ji').text('￥' + xiao_ji.toFixed(2));
                ji_suan_zong_shu_jia();
                // // 选中数量总计
                // var conent_sum = 0;
                // $(".conent").each(function(i, ele) {
                //     conent_sum+=parseInt($(ele).text());
                // });
                // // 把结果给数量总计
                // $('.conent_sum').text(conent_sum);
                // // 选中价格总价
                // var xiao_ji_sum = 0;
                // $(".xiao_ji").each(function(i, ele) {
                //     xiao_ji_sum += parseFloat($(ele).text().substr(1));
                // });
                // $(".zong_jia").text("￥" + xiao_ji_sum.toFixed(2));
            });
            // 减号功能
            $(".jian_hao").click(function() {
                var n = $(this).siblings('.conent').text();
                if(n == 1) {
                    return false;
                }
                n--;  
                $(this).siblings('.conent').text(n);
                // 小计
                var dan_jia = $(this).parent().siblings('.price').text().substr(1);
                var xiao_ji =  n* dan_jia; 
                $(this).parent().siblings('.xiao_ji').text('￥' + xiao_ji.toFixed(2));
                ji_suan_zong_shu_jia();
                // // 选中数量总计
                // var conent_sum = 0;
                // $(".conent").each(function(i, ele) {
                //     conent_sum+=parseInt($(ele).text());
                // });
                // // 把结果给数量总计
                // $('.conent_sum').text(conent_sum);
                // // 选中价格总价
                // var xiao_ji_sum = 0;
                // $(".xiao_ji").each(function(i, ele) {
                //     xiao_ji_sum += parseFloat($(ele).text().substr(1));
                // });
                // $(".zong_jia").text("￥" + xiao_ji_sum.toFixed(2));   
            });

            function ji_suan_zong_shu_jia() {
                // 选中数量总计
                var conent_sum = 0;
                $(".conent").each(function(i, ele) {
                    conent_sum+=parseInt($(ele).text());
                });
                // 把结果给数量总计
                $('.conent_sum').text(conent_sum);
                // 选中价格总价
                var xiao_ji_sum = 0;
                $(".xiao_ji").each(function(i, ele) {
                    xiao_ji_sum += parseFloat($(ele).text().substr(1));
                });
                $(".zong_jia").text("￥" + xiao_ji_sum.toFixed(2));
            }
            ji_suan_zong_shu_jia();
        });
    </script>
</body>
</html>